HTML5&CSS3
jQuery
PDF
Web
Web
WebWeb 2.0
Web
Web
Web
HTMLCSS
WebHTML5HTML
XHTML
CSS3CSS
HTML5
HTML
CSS3
CSS
Client Side
Java Script
jQueryjQuery
jQueryJava Script
HTML 5
HTML5
HTML5
HTMLXHTML
HTML
HTML
HTMLabbreviationHyper Text Markup
Language
Markup Language
HTML
Tags
Tags
Keywords
< ><b><html>
<b></b>
<b>Begin Tag
Opening Tag</b> End Tag
Closing Tag
HTMLnotepad
DreamWaverVisual Studio
extension
.html.htm
HTML
HTMLHTMLWeb Pages
Web
BrowserInternet ExplorerFirefoxGoogle chrome
HTML
HTML
HTML
HTML
HTMLNotepad
Internet Explorer
HTML
HTML
Notepad
<html>
<head>
<title>
My first HTML page
</title>
</head>
<body>
<p>
Welcome to my first HTML page!
</p>
</body>
</html>
firstPage.html
HTML
.txt
*.*Save as type
firstPage.html
Internet Explorer 8
HTML
HTML
Welcome to my first HTML page!
p
HTML
HTML
HTML Elements
Tags
<p>
Paragraphs
HTML
< ><html><head>
<title><body><p>
HTMLBegin TagEnd Tag
< >
/Slash</ >
</html></head></title></body></p>
HTML
p
HTML
<html>
<body>
<p>
</p>
</body>
</html>
</p><p>
</body><body>
</html><html>
<html>
<body>
<p>
</body>
</html>
</p>
</body><body>
</html></p>
White Spaces
HTMLSpaceTab
HTML
<html>
<body>
<h1>
Hi!
</h1>
</body>
</html>
HTML
<html><body><h1>Hi!</h1></body></html>
Tab
Space
HTML
HTMLHTML
HTMLBegin Tag
HTMLEnd Tag
HTML
HTML
Attributes
HTML
Lower Case
</p>
Welcome to my website.
<p>
</a>
Go to index
<a href="index.htm">
<hr />
HTML
<p></p>Welcome to
my website<a href="index.htm"></a>
Go to indexindex.htmhref
<hr />
HTML
HTML
Body Section
<body></body>
HTML
Head Section
<head></head>
HTML
<html></html>
HTML
HTML
<html>
<head>
</head>
<body>
</body>
</html>
Attributes
HTML
HTML
Links
HTML
Attributes
<p align="center">
</p>
p
alignpcenter
<p>align
HTML
Attributes
align
<p>
leftrightcenter
name="value
name
value
‘ ‘
HTML
Lower Case
HTML
Headings
HTML
id
Java ScriptjQuery
dir
ltr
rtl
ltr
rtl
align
left
right
center
justify
class
CSS
CSS3
name
HTML
Headings
HTML
h1h2h3h4
h5h6
h1
h6
hHeading
<html>
<head>
<title>
</title>
</head>
<body dir='rtl'>
<h1>
</h1>
<h2></h2>
<h3></h3>
<h4> </h4>
<h5></h5>
<h6></h6>
</body>
</html>
: h1h6
<body>dir
rtlright to left
ltr
<h1><h6>
Horizontal Line
HTML<hr />
<html>
<head>
<title>
</title>
</head>
<body dir='rtl'>
<p></p>
<hr />
<p></p>
<hr />
<p></p>
</body>
</html>
: <hr />
Comments
Comments
HTML
<!-- comment -->
HTML
<html>
<head>
<title>
</title>
</head>
<body dir='rtl'>
<!-- -->
<p></p> <hr />
<!-- -->
<p></p> <hr />
<!-- -->
<p></p>
</body>
</html>
<View->source
Paragraphs
<p><br />
Enter
HTML
Text Formatting
HTML
Bold
<b><strong>
Italic<i>
<em><u>Delete
<del>
<html>
<head>
<title></title>
</head>
<body>
<p>
This is a sample text to demonstrate
<b>bold</b>,
<i>italic</i>,
<u>underline</u> and
<del>delete</del> tags.
<!--
<br/> -->
<br/>
You may use other tags to generate the same output:
<br/>
This is a sample text to demonstrate
<strong>bold</strong>,
<em>italic</em>,
<u>underline</u> and
<del>delete</del> tags.
</p>
</body>
</html>
HTML
Special Characters
HTML
&value;value
http://www.w3schools.com/tags/ref_symbols.asp
XHTML
<
<
>
>
≠
≠
™
™
©
©
: HTML
<html>
<head>
<title>
</title>
</head>
<body>
<p>
3 < 5 and 10 > 2 and also 3 ≠ 4 ....
all rights reserved for © Mukhtar ™
</p>
</body>
</html>
Hyper Links
HTMLHyper Links
<a>aAnchor
hrefHyper Reference
<html>
<head>
<title>
</title>
</head>
<body>
<a href="http://www.microsoft.com"> </a><br />
<a href="http://www.google.com"></a><br />
<a href="http://www.msn.com" target="_blank" >MSN</a>
<br />
<a href="firstPage.html" target="_self"></a>
</body>
</html>
:
AbsoluteRelative
Path
firstPage.html
URLhref
target
_self
_blank
Resource
E-Mail
mailto:
<html>
<head>
<title>
</title>
Paths
http://msdn.microsoft.com/en-us/library/aa365247(VS.85).aspx
</head>
<body>
<a href="http://www.somesite.com/files/file1.zip">
</a>
<br />
<a href ="mailto:mokhtar_ss@hotmail.com"></a>
</body>
</html>
Save File Dialog
Outlook
Express
Images
HTML
<img/>
Image
src
Source
<br/>
<img/>
<img src="path" />
<html>
<head>
<title>
</title>
</head>
<body>
<img src="myPic.jpg" />
<img src="myPic2.gif" alt="" />
<img src="myPic.jpg" alt="" width="100px"
height="50px" />
<img src="" alt="" />
</body>
</html>
:
<img/>alt
src
imgheightwidth
px
<a>
<img/><a>
<html>
<head>
<title>
</title>
</head>
<body>
<a href = "mailto:mokhtar_ss@hotmail.com">
<img src="myPic.jpg" alt="" />
</a>
</body>
</html>
:
Image Maps
<img/>
<map>name
<area>
usemap
<html>
<body>
<p></p>
<img src="planets.gif" width="145" height="126"
alt="" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt=""
href="sun.htm" />
<area shape="circle" coords="90,58,3" alt=""
href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt=""
href="venus.htm" />
</map>
</body>
</html>
<map name="planetmap">
area
shape
coords
82,126
usemap
usemap
#
Internal Linking
HTML
Internal Links
<a>
href
<a href="#id">id </a>
id
<html>
<head>
<title>
</title>
</head>
<body>
<a href="#Para4"></a>
<h1></h1>
<p></p>
<h1></h1>
<p></p>
<h1></h1>
<p></p>
<h1 id="Para4"></h1>
<p></p>
</body>
</html>
Lists
HTML
Unordered List<ul>
Ordered List<ol>
<li>
List Item
<html>
<head>
<title></title>
</head>
<body dir="rtl">
<p></p>
<ul>
<li>HTML</li>
<li>HTML5</li>
<li>XHTML</li>
<li>CSS</li>
<li>CSS3</li>
</ul>
</body>
</html>
:
<ul></ul><ol></ol>
HTML
<html>
<head>
<title></title>
</head>
<body dir="rtl">
<p></p>
<ol>
<li>
HTML
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</li>
<li>HTML 5</li>
<li>XHTML</li>
<li>CSS</li>
<li>CSS 3</li>
</ol>
</body>
</html>
:
type
squaredisccircle
AaIitype
<dl>
<dt><dd>
<html>
<head>
<title></title>
</head>
<body dir="rtl">
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>XHTML</dt>
<dd>eXtensible Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
</dl>
</body>
</html>
Tables
HTML<table>
<table>
widthborder
table rows
<tr>
table data
<td>
<html>
<head>
<title></title>
</head>
<body dir="rtl">
<table border="1" width="50%">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
:
<table>width
border
<tr></tr>
<td></td>
HTML
HTML
Table Head
<thead>
</thead><tr></tr>
<th>
<td>
<td>table data<th>
table heading
Table Body
<tbody>
</tbody><tr>
<td>
Table Foot
<tfoot>
</tfoot><tr></tr>
<th>
Caption
<caption></caption>
: HTML
HTML
<html>
<head>
<title></title>
</head>
<body dir="rtl">
<table border="1" width="50%">
<caption></caption>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>150</td>
</tr>
<tr>
<td></td>
<td>200</td>
</tr>
<tr>
<td></td>
<td>350</td>
</tr>
<tr>
<td></td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>750</th>
</tr>
</tfoot>
</table>
</body>
</html>
HTML
bold
HTML
rowspan
colspan
rowspancolspan<td><th>
rowspancolspan
<html>
<head>
<title></title>
</head>
<body dir="rtl">
<table border="1" width="100%">
<tbody>
<tr>
<td></td>
<td> jQuery </td>
<td rowspan="3">
<img src="jQuery120.png">
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>2010</td>
</tr>
<tr>
<td colspan="3">
jQuery
.
</td>
</tr>
</tbody>
</table>
</body>
</html>
rowspancolspan
rowspan="3
colspan="3rowspancolspan
rowspancolspan
HTML
Forms
FormsHTMLInputs
<form>
</form> <input>
text boxescheck boxesbuttons
select lists
<form>action
Server Side PHP
ASP.NETJSP
method
get
http://www.site.com/file.php?name=Mukhtar&age=23&job=ComputerEngin
eer
http://www.site.com/file.php
name = Mukhtarage = 23job = ComputerEngineer
post
HTTP
method
<form>
<input>
nameid
type
button
checkbox
file
hidden
password
radio
reset
submit
text
typeinput
<html>
<head>
<title>
</title>
</head>
<body dir="rtl">
<form method="get" action="file.php">
<input type="text" name="nameText" id="nameText" />
<br/>
<input type="password" name="pass" id="pass" />
<br/>
<input type="submit" name="okButton" id="okButton"
value="" />
</form>
</body>
</html>
<html>
<head>
<title>
</title>
</head>
<body dir="rtl">
<form method="get" action="file.php">
<input type="text" name="nameText"
id="nameText" />
<br/>
<input type="password" name="pass"
id="pass" />
<br/>
<input type="file" name="pic"
id="pic">
<br/>
<input type="reset" name="resBtn" id="resBtn"
value="" />
<input type="submit" name="okButton" id="okButton"
value="" />
</form>
</body>
</html>
radiocheckbox
radio
checkbox
name
value
<html>
<head>
<title> radio checkbox</title>
</head>
<body dir="rtl">
<form method="post" action="file.php">
<p></p>
<input type="checkbox" name="wrKnow" value="nPaper" />
<input type="checkbox" name="wrKnow" value="wbSite" />
<input type="checkbox" name="wrKnow" value="frnd" />
<input type="checkbox" name="wrKnow" value="srEng" />
<p></p>
<input type="radio" name="rate" value="good" />
<input type="radio" name="rate" value="mid" />
<input type="radio" name="rate" value="bad" />
</form>
</body>
</html>
checkboxradio
radio
<select>
<option>
selected="selected"
<html>
<head>
<title>select</title>
</head>
<body dir="rtl">
<form method="post" action="file.php">
<p></p>
<select name="nationality">
<option selected="selected"></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
</form>
</body>
</html>
select
<textarea>
<input>text
<textarea>colsrows
<html>
<head>
<title>
textarea
</title>
</head>
<body dir="rtl">
<form method="post" action="file.php">
<p></p>
<textarea cols="30" rows="10" name="bio">
</textarea>
</form>
</body>
</html>
textarea
HTML <fieldset></fieldset>
<legend>
<label>for
<label>
<html>
<head>
<title>
fieldset
</title>
</head>
<body dir="rtl">
<form method="get" action="">
<fieldset>
<legend></legend>
<label for="nameTXT"></label>
<input type="text" name="nameTXT" id="nameTXT"
maxlength="50" />
<br/><br/>
<label for="ageTXT"></label>
<input type="text" name="ageTXT" id="ageTXT"
maxlength="2" />
</fieldset>
<br/>
<fieldset>
<legend></legend>
C#
<input type="checkbox" name="prog" value="cs"/>
VB.NET
<input type="checkbox" name="prog" value="vb"/>
F#
<input type="checkbox" name="prog" value="fs"/>
C++.NET
<input type="checkbox" name="prog" value="cpp"/>
</fieldset>
<fieldset>
<input type="submit" value="" />
</fieldset>
</form>
</body>
</html>
fieldSet
Frames
HTML
Frames
<frameset>
<frameset>
<frame>src
<html>
<frameset cols="30%,*">
<frame src="page_1.htm" />
<frame src="page_2.htm" />
</frameset>
</html>
<body>
noresize="noresize"<frame>
cols
<frameset>cols
rows
target
<a>
Links
<frameset><frame>
HTML<iframe>
<iframe>
<iframe src="URL"></iframe>
URL
heightwidth
Meta
<head></head>
meta
metametanamecontent
meta
meta
keywordsdescription
<html>
<head>
<meta name="keywords" content="xhtml website test
meta head"/>
<meta name="description" content="this page
demonstrates how to use meta elements"/>
</head>
<body>
</body>
</html>
MetaKeywords
MetaDescription
Meta
MetaHTML
HTML
HTML5HTML
XHTML
HTML
HTML
<!-- … -->
<!DOCTYPE>
XHTML
<a>
<abbr>
<acronym>
<address>
<applet>
Applet
<area />
<b>
<base />
<basefont />
//
<bdo>
<big>
<blockqoute>
<body>
<br />
<button>
<caption>
<center>
<cite>
<code>
<col />
<colgroup>
<dd>
<del>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<fieldset>
<font>
//
<form>
<frame />
<frameset>
<h1><h6>
<head>
<hr />
<html>
<i>
<iframe>
<img />
<input />
<ins>
<isindex>
<kbd>
<label>
<legeng>
<fieldset>
<li>
<link />
<map>
<menu>
<meta />
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<p>
<param />
<pre>
<q>
<s>
<samp>
<script>
Java ScriptjQuery
<select>
<small>
<span>
<strike>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
teletype
<u>
<ul>
<var>
<xmp>
HTML
XHTML
XHTMLeXtensible HTMLHTML
HTML
HTML
HTML
XMLeXtensible Markup Language
XHTML
XHTML
<hTml>
<heaD>
<title> HTML </title>
<BODY>
<h1>Bad HTML
<p>This is a paragraph
</boDy>
HTML
XHTML
XHTML
XHTML
HTML
XHTML XHTML
Lower Case
<html><body><head>
DOCTYPE
<!DOCTYPE>
XHTML
<!DOCTYPE> Document Type
DefinitionDTD
xmlns
<html>Name Space
XHTML
xmlns
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body></body>
</html>
<!DOCTYPE>
Transitional
<!DOCTYPE>
XHTML
XHTML 1.0 Strict
HTML<applet><basefont>
<center><dir><font><iframe><isindex><menu>
<noframes><s><strike><u>
<frameset>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Tansitional
HTML
<frameset>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
XHTML 1.0 Frameset
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
Strict
Ruby
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML
XHTML
XHTML
http://www.w3schools.com/xhtml/default.asp
XHTML
HTML5
HTML
HTML 4.01
Web 2.0
HTML
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
Google ChromeFirefoxOperaInternet ExplorerSafari
HTML 5
Video
HTML 5
<video>heightwidth
<source>
srctype
<html>
<head>
<title>
</title>
</head>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
</video>
</body>
</html>
<video>
HTML 5
:
<video>
MPEG4OggWebM
<video>
audio
muted
autoplay
autoplay
controls
controls
height
loop
loop
poster
src
width
<video>
Audio
HTML 5
<audio>
<html>
<head>
<title></title>
</head>
<body>
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
</audio>
</body>
</html>
:
<audio>
<audio>MP3Ogg
Wav
<audio>
autoplay
autoplay
controls
controls
loop
loop
preload
preload
src
<video>
Forms
HTML 5Forms
<input>
<input>
type
email
url
number
range
date
month
week
time
datetime
datetime-local
search
text
color
: HTML 5
<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
Name:
<input type="text" name="stdnt_name" /><br />
E-Mail:
<input type="email" name="stdnt_email" /><br />
Website:
<input type="url" name="stdnt_url" /><br />
Points:
<input type="range" name="points" min="1"
max="10" /><br />
Date:
<input type="date" name="user_date" /><br />
<input type="submit" />
</form>
</body>
</html>
HTML5
<datalist>
<option>
<select><datalist>
list
<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
name:
<input type="text" list="names_list"
name="stdnt_name" /><br />
<datalist id="names_list">
<option label="A" value="nameA" />
<option label="B" value="nameB" />
<option label="C" value="nameC" />
</datalist>
</form>
</body>
</html>
HTML5
<keygen><output>
<keygen>
Authentication
<keygen name="security" />
<output> Outputs
Java Script
<output id="result" onforminput="resCalc()"></output>
Canvas
HTML 5<Canvas>
Java Script
PluginsFlash
heightwidth
<canvas id="myCanvas" width="200" height="100"></canvas>
Java Script
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
id
var c=document.getElementById("myCanvas");
Object2D
var cxt=c.getContext("2d");
Methodscxt
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
Java Script
#FF0000
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
</body>
</html>
Methods
HTML
fillStyle
cxt.fillStyle="#FF0000";
fillRect
cxt.fillRect(0,0,150,75);
moveTo
cxt.moveTo(10,10);
createLinearGradient
cxt.
createLinearGradient(0,0,170,50)
addColorStop
cxt .addColorStop(0,"#FF0000");
drawImage
cxt.drawImage(img,0,0);
lineTo
cxt.lineTo(150,50);
<canvas>
HTML 5Client
localStorage
localStorage.varName="value";
varNamevalue
localStorage.varName;
sessionStorage
sessionStorage.varName="value";
varNamevalue
sessionStorage.varName;
Java Script
HTML 5
HTML 5
<article>
<aside>
<audio>
<canvas>
<command>
<datalist>
<details>
<embed>
plugin
<figcaption>
<figure>
<figure>
<footer>
<header>
<hgroup>
<keygen>
<mark>
<meter>
<nav>
<output>
<progress>
<rp>
Ruby
Ruby
<rt>
Ruby
<ruby>
Ruby
<section>
<source>
<summary>
detail
<time>
<video>
<wbr>
HTML 5
CSS 3
HTML5
CSS
CSS3
CSS3CSS
CSS
CSSCascading Style Sheet
HTML
CSS
CSS
HTML
HTML
<font>
Font
CSS
CSSHTML
CSS
CSS
CSS
CSS
Inline CSS
CSSstyle
<p style="color:red;"></p>
--CSS
CSS
Embeded CSS
font
font
CSS Head <style>
</style>
<html>
<head>
<style type="text/css">
CSS
</style>
</head>
<body>
</body>
</html>
CSS
External CSS
CSS.css
<link>
hrefstylesheet
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
<body></body>
</html>
CSS
CSS
CSSRules
CSS
selector {
property:value;
property:value;
property:value;
…
}
{}
selector
CSS
CSS
HTMLh1ap
id#link1#header1#searchForm
CSS
property:value;
propertyvalue
HTMLCSS
CSS
text-align
h1 {text-align:center;}
h1<h1>right
text-alignleftcenter
justifywidth
text-decoration
p a {text-decoration:overline;}
p a<a>
<p>overline
noneunderline
line-through
direction
Decor
p {direction:rtl;}
rtl
right to
left ltr
direction
text-transformation
p {text-transformation:uppercase;}
<p>
uppercaselowercasecapitalize
text-indent
p {text-indent:20px;}
color
p {color:red;}
p<p>
colorredgreenwhite
Hexadecimal#FF0000
Aa
#00FC00 #FFFFFF rgb
rgb(255,0,0)rgb(0,255,0)rgb(255,255,255)
//
00
FF
#FF00FF
#8B008B
rgb
0255
<html>
<head>
<title>
</title>
<style type="text/css">
p {
text-align:justify;
color:#ff0000;
text-decoration:underline;
direction:rtl;
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>
Fonts
CSSFonts
CSSfont-family
commafont-family
CSSSerifSans-serif
Monospace
CSSfont-style
italicnormal
font-sizeemem
<html>
<head>
<title>
</title>
<style type="text/css">
p {
font-family:"Tahoma","Simplified Arabic",sans-serif;
font-size:1.5em;
font-style:italic;
direction:rtl;
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>
sans-serif
sans-serif
a:linka
a:visited
a:hove
a:active
<html>
<head>
<title>
</title>
<style type="text/css">
a:link{text-decoration:none;color:blue;}
a:visited{color:green;}
a:hover{text-decoration:underline;}
a:active{font-size:120%;}
</style>
</head>
<body>
<a href="#">normal link</a> <br/>
<a href="www.google.com">visited link</a> <br/>
<a href="#">hover link</a> <br/>
<a href="#">normal link 2</a> <br/>
</body>
</html>
a:hovera:linka:visiteda:activea:hover
Backgrounds
CSS
background-color
background-color:#CF1A11;
background-
image
background-image:url(‘image.jpg’);
background-repeatrepeat-x
repeat-yrepeat
no-repeat
background-position
left topleft centerleft bottomcenter topcenter center
center bottomright topright centerright bottom
<p>
<html>
<head>
<title>
</title>
<style type="text/css">
.firstP {
background-color:black;
color:white;
}
.secondP {
background-image:url(‘image1.jpg’);
background-repeat:no-repeat;
background-position:center center;
}
p {direction:rtl;}
</style>
</head>
<body>
<p class="firstP">
</p>
<p class="secondP">
<br/><br/>
<br/>
<br/>
</p>
</body>
</html>
classes
classCSS
class
CSS
list-style-type
circlesquarediscnone
upper-romanlower-romanlower-
alphaupper-alphalower-latinupper-latindecimal
list-style-image
list-style-image:url('image.gif');
<html>
<head>
<title>
</title>
<style type="text/css">
ul {list-style-type:square;}
ol {list-style-image:url('dot.gif');}
</style>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</body>
</html>
HTMLCSS
CSS
<html>
<head>
<style type="text/css">
table
{
font-family:"Trebuchet MS", sans-serif;
width:100%;
border-collapse:collapse;
direction:rtl;
text-align:center;
}
td, th
{
font-size:1em;
border:1px solid #98bf21;
}
th
{
font-size:1.1em;
background-color:#A7C942;
color:#ffffff;
}
.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
</tr>
<tr class="alt">
<td> </td>
<td></td>
<td></td>
</tr>
<tr>
…
…
</table>
</body>
</html>
CSS
CSS
border
soliddashed
dotted
border-collapse
collapse
.alt
Zebra-stripping
Positioning
CSS
CSS
Static
Fixed
topleftrightbottom fixed
position
Relative
topleftrightbottomrelative
position
Absolute
topleftrightbottomabsolute
position
<html>
<html>
<head>
<style type="text/css">
* {direction:rtl;}
h1
{ position:absolute; left:100px; top:150px; }
</style>
</head>
<body>
<h1></h1>
<p>
</p>
</body>
</html>
CSS
*
z-index
z-index
<html>
<head>
<style type="text/css">
* {direction:rtl;}
img
{
position:absolute;
left:100px;
top:50px;
z-index:-1;
}
</style>
</head>
<body>
<h1></h1>
<img src="image1.jpg" width="100" height="140" />
<p>
z-index
</p>
</body>
</html>
z-index
scrolloverflow
<html>
<head>
<style type="text/css">
* {direction:rtl;}
div
{
background-color:#00FFFF;
width:250px;
height:100px;
overflow:scroll;
}
</style>
</head>
<body>
<div>
<p>
</p>
</div>
</body>
</html>
CSS
widthheight
px
150px
%
50%
em
em
1.5em
in
1in
cm
1cm
mm
100mm
pt
30pt
pc
15pc
CSS
CSS Box Model
box model
HTML
content
padding
border
margin
box model
CSS
border
CSS border-width
border-styleborder-color
border-width
border-styledotteddashed
soliddoublegrooveridge
insetoutset
<html>
<head>
<style type="text/css">
* { direction:rtl; }
.one
{ border-style:solid; }
.two
{ border-style:dashed; }
</style>
</head>
<body>
<p class="one"> </p>
<p class="two"> </p>
</body>
</html>
border-style
border-style
border-style: dotted dashed groove double;
border-left-styleborder-right-styleborder-top-style
border-bottom-styleborder-color
border-width
padding
padding-leftpadding-rightpadding-
toppadding-bottom
padding
<html>
<head>
<style type="text/css">
p
{ direction:rtl; background-color:black; color:white; }
.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>
<body>
<p>
</p>
<p class="padding">
</p>
</body>
</html>
margin
margin-leftmargin-right
margin-topmargin-bottom
margin
auto
<html>
<head>
<style type="text/css">
p
{ direction:rtl; background-color:black; color:white; }
.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p></p>
<p class="margin"></p>
</body>
</html>
margin
HTMLCSS
nonedisplay
hiddenvisibility
HTML
block
<h1><p><div>
inline
<a><span>
CSSblockinline
blockinlinedisplay
opacity
CSSopacity
0.01.0
floating
floatCSS
CSSrightleft
<html>
<head>
<style type="text/css">
p { direction:rtl; text-align:justify; }
img { float:right; }
</style>
</head>
<body>
<p>
<img src="picture1.gif" />
</p>
</body>
</html>
float
float
CSS clear
left
rightboth
CSS
CSS/**/
/* comment */
Media types
CSS
mediaCSS
mediaCSS
@media
<html>
<head>
<style type="text/css">
@media screen
{
p{
text-align:justfy
direction:rtl;
color:white;
}
body {
background-color:green;
}
}
@media print
{
p
{
text-align:justfy;
direction:rtl;
color:white;}
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>
@media
@media
@media
all
aural
braille
embossed
handheld
print
projection
screen
tty
tv
@media
Media CSS
CSS
CSS3
CSS
CSS
.class
.Mukhtar
class="Mukhtar
#id
#name
id="name
*
*
tag
p
<p>
tag,tag
a,p
<a>
<p>
tag tag
div a
<a>
<div>
tag>tag
div>a
<a>
<div>
tag+tag
div+p
<p>
<div>
[attribute]
[src]
src
[attribute=v]
[src=image.jpg]
src
image.jpg
[attribute~=v]
[target~=_blank]
target
_blank
[attribute|=v]
[href|=http://]
target
http://
:link
a:link
:visited
a:visited
:active
a:active
:hover
a:hover
:focus
input:focus
:first-letter
p:first-letter
<p>
:first-line
p:first-line
<p>
:first-child
p:first-child
<p>
:before
p:before
<p>
:after
p:after
<p>
:lang(language)
p:lang(en)
<p>
langen
CSS
CSS 3
Web 2.0
CSS3
CSS3CSS
Module
CSS3
HTML5
CSS3 Borders
CSS3Round Corner Borders
Photoshop
border-radius
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>
<div>The border-radius property allows you to add rounded
corners to elements.</div>
</body>
</html>
border-radius
Firefox-moz-border-radius
CSS3
repeated
stretch
CSS3
border-image-sourcerepeat
stretch border-image-repeat
border-image-width border-
image-sliceborder-image-outset
border-image
border-image:source slice width outside repeat;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
border-width:15px;
width:250px;
padding:10px 20px;
-webkit-border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div> Here, the image is stretched to fill the area.</div>
</body>
</html>
Firefox -moz-
SafariChrome-webkit-Opera-o-
CSS3
box-shadow
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;
-webkit-box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
SafariChrome-webkit-
CSS3 Backgrounds
CSS3
background-size
CSS3
background-size: 80px 60px;
Firefox-moz-
background-origin
context-box
padding-box
border-box
CSS3
SafariChrome-webkit-
CSS3
background-image:url(back1.gif),url(back2.png);
CSS3
CSS3
hanging-punctuation
none first
last allow-
end force-
end
<p>
punctuation-trim
start end
allow-end
adjacent
none
<p>
text-justify
auto inter-
word inter-
ideograph
inter-cluster
distribute
kashidatrim
text-align
Justify
text-outline
text-overflow
clipellipsis
string
text-shadow
text-wrap
nonenormal
unrestricted
suppress
word-break
normal
break-all
hyphenate
word-wrap
normal
word-break
word-break
CSS3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1></h1>
</body>
</html>
CSS3
CSS
CSS3
src
@font-face
@font-face
font-family
Internet Exploer.eot
.ttf.otf
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
@font-face
{
font-family: myFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot') format("opentype"); /* IE */
}
div
{
font-family:myFont;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2D Transformation
CSS3
translaterotatescale
transform
Internet Explorer-ms- Firefox
-moz-Opera-o-ChromeSafari
-webkit-
translate(x,y)
translateX(n)
Xn
translate(n)
Yn
scale(x,y)
scaleX(n)
Xn
scaleY(n)
Yn
rotate(α)
α
skew(Xα,Yα)
XαYα
skewX(α)
Xα
skewY(α)
Yα
CSS3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
-webkit-transform:skew(30deg,20deg);
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
</style>
</head>
<body>
<div>It is CSS3 Magic!</div>
</body>
</html>
Skew
degdegree
rad
3D transformation
CSS3
translate3d(x,y,z)
translateX(n)
nX
translateY(n)
nY
translateZ(n)
nZ
scale3d(x,y,z)
scaleX(n)
Xn
scaleY(n)
Yn
scaleZ(n)
Zn
rotate3d(x,y,z,α)
α
rotateX(α)
Xα
rotateY(α)
Yα
rotateZ(α)
Zα
perspective(n)
CSS3
Transition
CSS3
transitionCSS
transition: property duration;
propertyduration
transition: property1 duration1, property2 duration2,… etc;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
-webkit-transition:width 2s, height 2s;
}
div:hover
{
width:200px;
height:200px;
webkit-transform:rotate(180deg);
}
</style>
</head>
<body>
<div>Hover over me to see the transition effect!</div>
</body>
</html>
ssecond
CSS3
CSS3
.gif flash
@keyframe
fromto
animation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
-webkit-animation:myAnimation 5s;
}
@-webkit-keyframes myAnimation
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS
@keyframes
@-webkit-keyframes myAnimation
{
0% {background:red;}
15% {backgroung:green;width:150px;color:white;}
50% {height:350px;}
100% {background:yellow;}
}
0%100%
CSS3
CSS3Multi-Columns
column-count
column-widthcolumn-gap
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.newspaper
{
-webkit-column-count:3;
}
</style>
</head>
<body>
<div class="newspaper">
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content.
</div>
</body>
</html>
column-rule
column-rule: 4px dotted black;
CSS3 User Interface
CSS3
appearance
normal icon
window button
menufield
icon
autoinherit
nav-down
nav-left
nav-right
nav-up
auto inherit
nav-index
Tab
Tab
resize
nonehorizontal
verticalboth
div
CSS3
CSS3
CSS3
tag1~tag2
p~ul
tag[attribute^=v]
a[href^="https"]
hrefhttps
tag[attribute$=v]
a[href$=".xml"]
.xml
tag[attribute*=v]
a[href*="micro"]
micro
:first-of-type
p:first-of-type
<p>
:last-of-type
p:last-of-type
<p>
:only-of-type
p:only-of-type
<p>
:only-child
p:only-child
<p>
:nth-child(n)
p:nth-child(2)
<p>
:nth-last-child(n)
p:nth-last-child(2)
<p>
:nth-of-type(n)
p:nth-of-type(2)
<p>
:last-child
p:last-child
<p>
:root
:root
:empty
p:empty
<p>
:target
#news:target
#news
:enabled
input:enabled
:disabled
input:disabled
:checked
input:checked
:not(selector)
:not(p)
<p>
::selection
::selection
CSS3
CSS3
HTML5 CSS3
Java ScriptjQuery
PHPASP.NET
Web Developer
HTML5CSS3
mokhtar_ss@hotmail.com
HTML .......................
HTML .............
<p>align ................
: .................................................
: <hr /> ..................................................
.
.........................................
..............................
: ...................................................
: ..................................................
:
...........................
................................................
...........................
: ..................................................
..................................................
: .........................................................
...................................
..........................
: ...................................................
: HTML .....................................
HTML ..............................................
rowspancolspan .
..................................................
........................................................
checkboxradio ......................................
select .............................................
textarea .........................................
fieldSet ..................................................
...............................................
..................................................
: ..............
: ............
...........................
..........................................
..................................................
....................................................................................
...................................
.........
CSS ........................................
CSS ....................
z-index ......................................
...............
box model ...............................................
................................
margin ..........................
float .....................................
@media ..................................................
@media ..................................................
border-radius .......................
CSS3 ...............................................
...................................
...................................
CSS3 .........................
Skew ..........................
....................................
CSS3 ...............................
HTML ...........................
: HTML ...........................................
typeinput .........................
HTML.............................................................
<video> ....................................................
<video> ....................................................
: HTML 5 ..................................
<canvas> .........................................
HTML 5 .............................................
CSS ...................................................
@media ......................................................
CSS .............................................................
CSS3 .............................
CSS3 ...............................
CSS3 ...............................
CSS3 ..............................................
.........................................................................
...........................................................................
...............................................................
........................................................................
HTML ...............................................................
HTML......................................
HTML ....................................................
HTML................................................................
WHITE SPACES .......................................................
HTML ...................................................
HTML ..................................................
ATTRIBUTES ...................................................
HEADINGS ....................................................
HORIZONTAL LINE ..........................................
COMMENTS ..........................................................
PARAGRAPHS ...............................................
TEXT FORMATTING ....................................
SPECIAL CHARACTERS ...............................
HYPER LINKS ..................................................
IMAGES .......................................................
..............................................
IMAGE MAPS .................................................
INTERNAL LINKING ..............................................
LISTS ..................................................................
TABLES...............................................................
.........................................................
FORMS ...............................................................
.........................................
FRAMES .............................................................
META ..............................................................
HTML .............................................................
XHTML ......................................................................
XHTML ................................................................
<!DOCTYPE> .............................................
.......................................................
XHTML ............................................
HTML5 ......................................................................
HTML 5 .........................................
VIDEO ..........................................................
AUDIO ........................................................
FORMS .......................................................
CANVAS ........................................................
...............................................
HTML 5 ...............................................
........................................................................
CSS ................................................................
CSS ................................................
CSS ........................................................
CSS ...............................................................
.................................................
FONTS ...................................................
....................................................
BACKGROUNDS ...........................................
.....................................................
...................................................
POSITIONING ............................................
CSS.....................................................
CSS BOX MODEL ...........................................
BORDER ...................................................
PADDING ..........................................
MARGIN ..........................................
.............................................................
.......................................................
OPACITY ............................................................
FLOATING ............................................................
CSS ...............................................................
MEDIA TYPES ..................................................
CSS .........................................................
CSS 3 .....................................................................
.......................................................
CSS3 BORDERS ..............................................
CSS3 BACKGROUNDS .......................................
CSS3 ................................
CSS3 ........................................
2D TRANSFORMATION ........................
3D TRANSFORMATION .......................
TRANSITION ................................................
CSS3 ..............................................................
CSS3 ..................................................
CSS3 USER INTERFACE ......................................
CSS3 .............................................................
.....................................................................
.............................................................
..............................................................
...........................................................
.
.
.
.
.
.
.
.
.
.
.
HTML5 & CSS3
jQuery
.
3D Game Studio
F1
.
.
.
Desktop: C#, VB.NET, VB6, Java.
Web:
o Server-Side: ASP.NET classic and ASP.NET MVC,
PHP Classic & PHP MVC using CodeIginiter
framework., JSP.
o Client-Side: HTML 5, CSS 3, java script & jQuery.
o Technologies: XML, JSON.
Smart phones: Android programming.
-Access.
-Word, MS-PowerPoint, Photoshop, Maintenance
skills
ASP.NET
vb4arab.com -
.
.
.
.
.
.
.
.
.
.
-
.
.
.
.
mokhtar_ss@hotmail.com
